<template>
	<div>
		<div class="anniu">Aurora Borealis night</div>
	</div>
</template>

<script>
</script>

<style >
	.anniu,.anniu::after{
	           font-family: 'Do Hyeon', sans-serif;
	           width: 260px;
	           height: 80px;
	           text-align: center;
	           font-size: 22px;
	           line-height: 80px;
	           color: rgb(255, 251, 251);
	           background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
	           box-shadow: 5px 0 0 rgb(0, 204, 255);
	           cursor: pointer;
	           position: relative;
	       }
	       .anniu::after{
	           content: 'Aurora Borealis night';
	           position: absolute;
	           top: 0;
	           left: 0;
	           text-shadow: -5px -2px 0 rgb(0, 183, 255),
	           5px 2px 0 rgb(0, 255, 115) ;
	           visibility: hidden;
	          
	       } 
	       .anniu:hover{
	           animation: san 1s ; 
	           animation-timing-function: steps(1, end);
	       }
	
	       /* 
	       
	       clip-path: inset(20% -5px  60%  0);
	       clip-path: inset(50% -5px  30%  0);
	       clip-path: inset(80% -5px  5%  0);
	       clip-path: inset(0 -5px  80%  0);
	       
	       
	        */
	       @keyframes san{
	           0%{
	            clip-path: inset(20% -5px  60%  0);
	            transform: translate(-6px,5px);
	            visibility: visible;
	           }
	           10%{
	            clip-path: inset(50% -5px  30%  0);
	            transform: translate(6px,-5px);
	           }
	           20%{
	            clip-path: inset(20% -5px  60%  0);
	            transform: translate(5px,0px);
	
	            }
	            30%{
	                clip-path: inset(80% -5px  5%  0);
	            transform: translate(-8px,5px);
	            }
	            40%{
	                clip-path: inset(0 -5px  80%  0);
	            transform: translate(-4px,-3px);
	
	            }
	            50%{
	                clip-path: inset(50% -5px  30%  0);
	            transform: translate(-6px,-5px);
	            }
	            60%{
	                clip-path: inset(80% -5px  5%  0);
	            transform: translate(-7px,5px);
	
	            }
	            70%{
	                clip-path: inset(0 -5px  80%  0);
	            transform: translate(3px,6px);
	            }
	            80%{
	                clip-path: inset(50% -5px  30%  0);
	            transform: translate(5px,5px);
	
	            }
	            90%{
	                clip-path: inset(20% -5px  60%  0);
	            transform: translate(6px,-5px);
	
	            }
	            100%{
	                clip-path: inset(0 -5px  80%  0);
	            transform: translate(1px,5px);
	
	            }
	       }

</style>
